<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

<!-- 
  ppi: (像素密度)
    Pixels Per Inch也叫像素密度单位，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高

    Pixels Per Inch是像素的密度单位，就像PPI值越高，画面的细节就会越丰富，所以数码相机拍出来的图片因品牌或生产时间不同可能有所不同，常见的有72PPI，180PPI和300PPI,默认出来就是这么多(A710拍出的是180PPI)。 DPI(Dots Per Inch)是指输出分辨，针对于输出设备而言的，一般的激光打印机的输出分辨率是300PPI-600PPI，印刷的照排机达到1200PPI-2400PPI，常见的冲印一般在150PPI到300PPI之间。

    乔布斯，iphone4的时候提出,视网膜高清屏(Retina屏, 当一个设备的ppi大于300的时候，那么肉眼就看不出像素点了)



  dpi: 概念类似于ppi，在安卓设备上一般叫dpi


  dpr: (设备像素比)
    dpr = 设备像素 / 图像像素
          (物理像素)  (css像素)

    以iphone6为例，750 x 1334表示设备像素,真实的像素点
                  375 x 667表示图像像素,可以显示的css的宽度
    iphone6的dpr是 750 / 375 = 2


    iphoneX是 1125 / 375 = 3
    iphone14 Pro max 是 1290 / 430 = 3


    设计图的主流尺寸 640px 750px 1125px 等
    假设拿到一张750px宽的设计图
    可以知道设计师根据iphone6/7/8的尺寸来设计的
    所以在写css的寸尺的时候，需要除以dpr2
    

  
 -->
